apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx (1)

74-94: Optional: extract activePayload[0]?.payload into a shared useMemo.

dataRow is derived identically in both currentTotal and currentData. Extracting it reduces duplication and makes the relationship between the two memos explicit.

♻️ Suggested refactor

+  // Resolve the full data row for the hovered point once, shared by both total and per-series calculations
+  const hoveredDataRow = useMemo(() => {
+    if (!activePayload?.length) return null;
+    return activePayload[0]?.payload ?? null;
+  }, [activePayload]);

   const currentTotal = useMemo((): number | null => {
     if (!activePayload?.length) return grandTotal;
-    const dataRow = activePayload[0]?.payload;
-    if (!dataRow) return grandTotal;
+    if (!hoveredDataRow) return grandTotal;
-    const rawValues = dataKeys.map((key) => dataRow[key]);
+    const rawValues = dataKeys.map((key) => hoveredDataRow[key]);
     ...
-  }, [activePayload, grandTotal, dataKeys, aggregation]);
+  }, [hoveredDataRow, grandTotal, dataKeys, aggregation]);

   const currentData = useMemo((): Record<string, number | null> => {
     if (!activePayload?.length) return totals;
-    const dataRow = activePayload[0]?.payload;
-    if (!dataRow) return totals;
+    if (!hoveredDataRow) return totals;
     const hoverData: Record<string, number | null> = {};
     for (const key of dataKeys) {
-      const value = dataRow[key];
+      const value = hoveredDataRow[key];
       ...
     }
     ...
-  }, [activePayload, totals, dataKeys]);
+  }, [hoveredDataRow, totals, dataKeys]);

Also applies to: 112-132

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx` around
lines 74 - 94, Extract the repeated expression activePayload[0]?.payload into a
shared useMemo (e.g., activeDataRow or currentRow) and use that memo in both
currentTotal and currentData; create the memo like const activeDataRow =
useMemo(() => activePayload?.[0]?.payload, [activePayload]) then replace local
dataRow usages in the currentTotal and currentData useMemo blocks with
activeDataRow and update their dependency arrays to depend on activeDataRow
instead of activePayload to remove duplication and make the relationship
explicit.

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Learnt from: matt-aitken
Repo: triggerdotdev/trigger.dev PR: 3019
File: apps/webapp/app/components/primitives/charts/Card.tsx:26-30
Timestamp: 2026-02-11T16:37:32.429Z
Learning: In projects using react-grid-layout, avoid relying on drag-handle class to imply draggability. Ensure drag-handle elements only affect dragging when the parent grid item is configured draggable in the layout; conditionally apply cursor styles based on the draggable prop. This improves correctness and accessibility.